import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { patOrdersApi } from "@/api/statisticalReport/outpatientPrescriptionFees";
import { useTranslation } from "react-i18next";
const index = () => {
	const { t } = useTranslation();
	const en_vi = "statisticalReport.outpatientPrescriptionFees";
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.paymentTime`),
			field: "pmtTime",
			component: "RangePicker"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.serialNumber`),
			dataIndex: "orderId",
			render: (_: any, record: any, index: number) => `${index + 1}`,
			width: 80
		},
		{
			title: t(`${en_vi}.deptName`),
			dataIndex: "deptName"
		},

		{
			title: t(`${en_vi}.rxCount`),
			dataIndex: "rxCount"
		},
		{
			title: t(`${en_vi}.unRxCount`),
			dataIndex: "unRxCount"
		},
		{
			title: t(`${en_vi}.unchargedPercentage`),
			dataIndex: "discountPercent",
			render: (_: any, record: any) => (record.unRxCount / (record.rxCount + record.unRxCount)) * 100
		}
	];
	const [registerTable] = useTable({
		api: patOrdersApi.patOrdersList,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 120,
			schemas,
			showActionButtonGroup: true,
			showAdvancedButton: false,
			baseColProps: { span: 6 },
			actionColOptions: { span: 24 }
		},
		bordered: true,
		beforeFetch: value => {
			console.log(value);
			return {
				...value,
				svcType: 0
			};
		}
	});
	const handlerToolbarAction = async (key: string) => {
		console.log(key);
	};
	return (
		<div className="page">
			<div className="page-content ">
				<BasicTable register={registerTable}></BasicTable>
			</div>
			<Toolbar action={handlerToolbarAction} btnList={["print"]} />
		</div>
	);
};

export default index;
